<template>
    <div class="custom-pay-success-page">
      <div class="container">
        <!-- 支付结果 -->
        <div class="success-card">
          <!-- 自定义图标或 SVG -->
          <div class="icon success-icon">✅</div>
          <h2 class="title">结算成功</h2>
          <p class="subtitle">订单已生成，请尽快完成支付</p>
  
          <div class="actions">
            <el-button type="primary" @click="$router.push('/pendingPay')">查看订单</el-button>
            <el-button @click="$router.push('/user')">返回首页</el-button>
          </div>
  
          <div class="notice">
            感谢您的信任与支持！
          </div>
        </div>
      </div>
    </div>
  </template>

  <style scoped>
.custom-pay-success-page {
  background-color: #f9fbff;
  padding: 60px 20px;
  font-family: 'Poppins', sans-serif;

  .container {
    max-width: 600px;
    margin: 0 auto;
  }

  .success-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    animation: fadeInUp 0.6s ease-out;

    .icon {
      font-size: 60px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-bottom: 20px;
    }

    .success-icon {
      background: linear-gradient(135deg, #7a7aff, #9b59b6);
      color: white;
    }

    .title {
      font-size: 28px;
      font-weight: bold;
      color: #2c3e50;
      margin-bottom: 10px;
    }

    .subtitle {
      font-size: 16px;
      color: #666;
      margin-bottom: 30px;
    }

    .actions {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 30px;

      button {
        border-radius: 8px;
        padding: 12px 24px;
        font-size: 16px;
        transition: all 0.3s ease;
      }

      button.el-button--primary {
        background: linear-gradient(135deg, #7a7aff, #9b59b6);
        border: none;
      }

      button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
    }

    .notice {
      font-size: 13px;
      color: #999;
      margin-top: 40px;
      line-height: 1.6;
      border-top: 1px dashed #ddd;
      padding-top: 20px;
    }
  }
}

/* 动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>